/**
 * MineAdmin is committed to providing solutions for quickly building web applications
 * Please view the LICENSE file that was distributed with this source code,
 * For the full copyright and license information.
 * Thank you very much for using MineAdmin.
 *
 * @Author X.Mo<root@imoi.cn>
 * @Link   https://github.com/mineadmin
 */
import type { Component } from "vue";
import MineUserBar from "./user-bar.tsx";
import type { MineToolbar } from "#/global";

export default defineComponent({
  name: "RightBar",
  setup() {
    const settingStore = useSettingStore();
    const toolbarHook = useGlobal().$toolbars;
    const toolbars = ref<Component[]>([]);
    // 计算处理后的工具栏数据
    const toolbarList = computed(() =>
      toolbarHook.toolbars.value.map((item: MineToolbar) => ({
        ...item,
        show:
          settingStore
            .getSettings("toolBars")
            ?.find((setting: MineToolbar) => setting.name === item.name)
            ?.show ?? item.show,
      }))
    );
    watch(
      () => toolbarList.value,
      () => {
        toolbarHook.state = false;
        toolbarHook.render().then((res: any) => {
          toolbars.value = res as Component[];
          console.log("*************",toolbars.value);
        });
        toolbarHook.state = true;
      },
      { immediate: true, deep: true }
    );
    return () => (
      <div class="right-bar">
        <button
          class="screen-button"
          onClick={() => {
            window.location.href = 'https://gyh.admin.dev.yingzhu.net/screen/#/';
          }}
        >
          大屏
        </button>
        {toolbars.value}
        <MineUserBar />
        <style jsx>{`
          .screen-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
          }
          
          .screen-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
          }
          
          .screen-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
          }
        `}</style>
      </div>
    );
  },
});
